<template>
  <div class="hello">
    <h1 ref="abc">{{ msg }}</h1>
    <h2>Number：{{count}}</h2>
    <input type="button" value="增加" @click="increase"/>
    <input type="button" value="减少" @click="decrease"/>
    <input type="button" value="获取" @click="getData"/>
  </div>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      message: 'hello world'
    }
  },
  created () {
  },
  mounted () {
    console.log(this.$refs.abc)
  },
  computed: mapGetters([
    'count'
  ]),
  methods: mapActions([
    'increase',
    'decrease',
    'getData'
  ]),
  components: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
body {
  margin: 0;
  padding: 0;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  /*margin: 0 10px;*/
}

a {
  color: #42b983;
}

#app {
  margin: 0;
}
.swiper-wrapper {
  height: 200px;
}
</style>
